/** IT生产数据部件 
 * Author:      yangjq 
 * CreateTime:  2023/10/26 10:42:16 
 * LastEditor:  yangjq 
 * ModifyTime:  2023/12/5 20:29:03 
 * Description: 
*/ 
<template>
  <div :id="ids" class="echarts-pie"></div>
</template>
<script>
import * as echarts from 'echarts'

export default {
  props: {
    chartData: {
      type: Number,
      default: 0
    },
    percentValue: {
      type: Number,
      default: 10
    },
    totalValue: {
      type: Number,
      default: 100
    },    
    ids: {
      // id
      type: String,
      default: 'echartspie'
    },
    title: {
      // id
      type: String,
      default: '生产数据'
    },
    fontColor: {
      // 字体颜色
      type: String,
      default: '#fff'
    },
    theme: {
      // 主题色
      type: String,
      default: '89949F'
    },
    unit: {
      // 单位
      default: function () {
        return 'TB'
      }
    }
  },
  data() {
    return {
      mychart: null
    }
  },
  mounted() {
    this.mychart = echarts.init(document.getElementById(this.ids))
  },
  watch: {
    chartData: {
      handler() {
        this.$nextTick(() => {
          this.drawChart()
        })
      },
      deep: true, // 深度监听，可监听到对象、数组的变化
      immediate: true // 立刻执行
    }
  },
  methods: {
    drawChart() {
      // 绘制图表
      const _this = this
      const option = {
        backgroundColor: 'rgba(255, 255, 255, 0)',
        title:{
          text:_this.title,
          //textVerticalAlign:'top',
          left:'center',
          bottom: 0,
          textStyle:{
            color:'#fff',
            textBorderWidth:'1',
            width:'100%',
            fontWeight:400,
            fontSize:14,
          }
        },
        grid: { top: 'center', left: 'center',width:'85%', height: '85%',containLabel:true },
        series: [
          {
            type: 'liquidFill',
            radius: '65%',
            center: ['50%', '45%'],
            data: [_this.percentValue], // data个数代表波浪数
            backgroundStyle: {
              color: 'rgb(255,255,255,0.2)'
            },
            // 修改波浪颜色
            color: [_this.theme, 'rgb(255,255,255,0.2)'],
            label: {
              normal: {
                formatter: `{a|${this.chartData}}/{b|${this.totalValue}}\n({n|${this.unit})}`,
                textStyle: {
                  fontSize: 12,
                  color: this.fontColor,
                  overflow: 'truncate',
                  ellipsis: '...',
                  rich: {
                    n: {
                      color: 'rgba(255, 255, 255, 1)',
                      fontSize: 12,
                      textBorderWidth: '1',                      
                    },
                    a: {
                      color: '#00FF00',
                      fontSize: 17,
                      fontWeight: 'bolder',                  
                    },
                    b: {
                      color: '#ffffff',
                      fontSize: 15,
                    },
                  },
                }
              }
            },
            outline: {
              show: false
            }
          },
          {
            type: 'pie',
            center: ['50%', '45%'],
            radius: ['78%', '82%'],
            hoverAnimation: false,
            data: [
              {
                name: '',
                value: 300,
                labelLine: {
                  show: false
                },
                itemStyle: {
                  color: _this.theme
                }
              },
              {
                // 画中间的图标
                name: '',
                value: 3,
                labelLine: {
                  show: false
                },
                itemStyle: {
                  normal: {
                    borderColor: _this.theme,
                    borderWidth: 3
                  }
                }
              },
              {
                // 画剩余的刻度圆环
                name: '',
                value: 97,
                itemStyle: {
                  color: 'rgba(255, 255, 255, 0.3)'
                },
                label: {
                  show: false
                },
                labelLine: {
                  show: false
                }
              }
            ]
          }
        ]
      }
      this.mychart.clear()
      this.mychart.setOption(option, true)
    }
  }
}
</script>
<style scoped lang="less">
.echarts-pie {
  width: 100%;
  height: 100%;
}
</style>
